<template>
  <div>
    主页面
    <!-- 第一次构建，重新启动一下就能加载页面，使用默认路径就能默认加载 -->

    <!-- 一般站内路由转换用NuxtLink -->
    <NuxtLink to="/about">
      关于我们
    </NuxtLink>
    <NuxtLink to="/lend">
      我要投资
    </NuxtLink>
    <NuxtLink to="/user">
      用户中心
    </NuxtLink>
    <!-- 站外超链接用a -->
    <a href="http://atguigu.com" target="_blank">尚硅谷</a>

    <h1>Home page</h1>
    <!-- <p>您的ip是 {{ ip }}</p> -->
    <p>您的ip是 {{ ip1 }}</p>
  </div>
</template>

<script>
export default {
  //服务器端数据渲染
  //可以理解为Java中的静态方法
  async asyncData({ $axios }) {
    //asyncData(page) //解构赋值：{对象的属性}，详见前面es6基础
    console.log('page', $axios) //console.log('page', page.$axios)

    //同步操作 async，await必须配套出现
    // let response = await $axios.$get('http://icanhazip.com/')
    let response = await $axios.$get('/')
    return {
      ip1: response, //response未定义
    }

    //异步操作
    // $axios.$get('http://icanhazip.com/').then((response) => {
    //   //page.$axios.$get('http://icanhazip.com/').then((response) => {
    //   console.log(response)
    //   // this.ip1 = response
    // })
    // return {
    //   ip1: response,//response未定义
    // }
  },

  //客户端渲染
  data() {
    return {
      ip: null,
    }
  },
  created() {
    //get
    // this.$axios.get('http://icanhazip.com/').then((response) => {
    //   console.log(response)
    //   this.ip = response.data
    //一般用 $get
    // this.$axios.$get('http://icanhazip.com/').then((response) => {
    //   console.log(response)
    //   this.ip = response
    // })
  },
}
</script>
